/*
  学习目标：生命周期-卸载阶段
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    isShow: true,
  };

  render() {
    // 条件渲染, 类似vue中的v-if
    const { isShow } = this.state;
    return <div>{isShow && <Child />}</div>;
  }
}

class Child extends React.Component {
  handleResize = () => {
    console.log('窗口改变了  ----->  ');
  };
  componentDidMount() {
    // 挂载后, 监听window窗口改变事件
    window.addEventListener('resize', this.handleResize);
  }

  // 卸载前, 取消监听的window窗口改变事件
  render() {
    return <div>Child</div>;
  }

  // 类似vue中的beforeDestroy,
  //  卸载前
  // 场景:  做清除的动作, 比如清除定时器/ 清除绑定的事件等
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }
}
